import { Tabs } from "antd";
import { JZBox, LeftBox, RightCard } from "./styled";
import VideoOne from "./VideoBox/videoOne";
import LogBox from "./LogBox/LogBoxOne";
import CardBoxs from "./CardBox/CaBoxOne";
import { useEffect, useState } from "react";


const JZpage = ()=>{
    const [shuaxin,setShuaxin] = useState('')
    const onChange = (key: string) => {
        setShuaxin(key)
      };
    
      const items = [
        {
            label: `1#装车道配置信息`,
            key: "ch1",
            children: <CardBoxs shuaxin={shuaxin} />,
        },
        {
            label: `2#装车道配置信息`,
            key: "ch2",
            children: <CardBoxs shuaxin={shuaxin}  />,
        },
        {
            label: `3#装车道配置信息`,
            key: "ch3",
            children: <CardBoxs shuaxin={shuaxin}  />,
        }
        ];
    
    const logItems = [
        {
            label: `1#装车道日志`,
            key: "1",
            children: <LogBox value={'ch1'}/>,
        },
        {
            label: `2#装车道日志`,
            key: "2",
            children: <LogBox value={'ch2'}/>,
        },
        {
            label: `3#装车道日志`,
            key: "3",
            children: <LogBox value={'ch3'}/>,
        }
        ];
    useEffect(()=>{
        setShuaxin('ch1')
    },[])
    return(
        <JZBox>
            <RightCard>
                <Tabs
                    onChange={onChange}
                    type="card"
                    items={items}
                />
            </RightCard>
            <LeftBox>
                <div>车道监控</div>
                <div className="videoBox">
                    <div className="video">
                        <VideoOne value={"ch1"}/>
                    </div>
                    <div className="video">
                        <VideoOne value={'ch2'} />
                    </div>
                    <div className="video">
                        <VideoOne value={'ch3'} />
                    </div>
                </div>
                <div className="logBox">
                    <Tabs
                        type="card"
                        items={logItems}
                    />
                </div>
            </LeftBox>
        </JZBox>
    )
}
export default JZpage;